import stores from "../../assets/scss/stores/stores.module.scss";
import { Modal, Carousel } from "antd";
import { getsingle } from "../../apis/stores/stores";
import { useState, useEffect } from "react";
function StoresDetail(props: any) {
  console.log(props);
  // const [isModalOpen, setIsModalOpen] = useState(false);
  // const hideModal = () => {
  //   setIsModalOpen(true);
  // };

  const handleCancel = () => {
    props.setIsModalOpen(false);
  };
  const [detail, setDetail] = useState<any>({
    name: "",
    services: "",
    startTime: "",
    endTime: "",
    address: "",
    mobile: "",
    tel: "",
    images: [],
    intro: "",
    logo: "",
  });
  // 单体
  const getdetails = async () => {
    let _editid = Number(props.info.id);
    console.log(0, _editid);
    if (_editid !== 0) {
      const res: any = await getsingle({ id: _editid });
      console.log(222222222, res);
      // delete res.data.startTime;
      // delete res.data.endTime;
      if (res.errCode === 10000) {
        setDetail({ ...res.data });
      }
    }
  };
  const onChange1 = (currentSlide: number) => {
    console.log(currentSlide);
  };
  useEffect(() => {
    getdetails();
  }, []);
  return (
    <div className={stores.pop}>
      <Modal
        footer={null}
        open={props.isopen}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
      >
        {/* 头部信息 */}
        <div className={stores.txt}>
          <p style={{ textAlign: "center" }}>门店详情</p>
          <div className={stores.box}>
            <div className={stores.hd_left}>
              <div className={stores.hd_img}>
                <img
                  style={{ width: "50px", borderRadius: "50%" }}
                  src={
                    "http://estate.eshareedu.cn/estate/upload/" + detail.logo
                  }
                  alt=""
                />
              </div>
              <div className={stores.hd_scene} style={{ marginLeft: "40px" }}>
                {detail.name}
              </div>
            </div>
            <div className={stores.hd_right}>{detail.services}</div>
          </div>
          <div className={stores.time} style={{ marginLeft: "10px" }}>
            营业时间： {detail.startTime}~{detail.endTime}
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              padding: "20px",
            }}
          >
            <div>{detail.address}</div>
            <div className="iconfont dianhua">电话</div>
          </div>
        </div>
        <div>
          <div className={stores.store_carousel} style={{ margin: "25px" }}>
            <div style={{ width: "400px", height: "200px" }}>
              <Carousel afterChange={onChange1} autoplay={true}>
                {detail.images.map((item: any) => (
                  <div
                    key={item.id}
                    style={{
                      background: "red",
                      width: "300px",
                      height: "100%",
                    }}
                  >
                    <div style={{ backgroundColor: "#f7f7f7"}}>
                      <img
                        src={
                          "http://estate.eshareedu.cn/estate/upload/" + item.url
                        }
                        alt=""
                        width={400}
                        height={200}
                        
                      />
                    </div>
                  </div>
                ))}
              </Carousel>
            </div>
          </div>
          <div
            className={stores.store_introduce}
            style={{ marginLeft: "10px" }}
          >
            介绍：{detail.intro}
          </div>
        </div>
      </Modal>
    </div>
  );
}

export default StoresDetail;
